<template>
	<view class="container">
		<scroll-view id="sv" scroll-y="true" enable-flex style="height: 100%;" @scrolltolower="appendSkuInfo" scroll-with-animation  :scroll-top="scrollTop" @scroll="scroll">
				<swiper class="headerSwiper" :touchable="true" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#d0beb5" indicator-active-color="#fff">
					<swiper-item>
						<img src="https://resource.smartisan.com/resource/15281a93ab968555ba3bd7a911b14f68.png?x-oss-process=image/format,webp" alt="">
					</swiper-item>
					<swiper-item>
						<img src="https://resource.smartisan.com/resource/48bf30c86c996662ecf795002215f023.png?x-oss-process=image/resize,w_750/format,webp" alt="">
					</swiper-item>
				</swiper>
				<view class="header">
					<view class="logo"></view>
					<view class="search" @click="toSearch">
						<view class="searchContainer">
							<img src="../../static/images/search.png" alt="">
							<text class="searchText"> 请输入搜索关键字 </text>
						</view>
					</view>
			</view>
			<Middle 
			:bigPic='middleOneBigPic' 
			:subPic1='middleOneSubPic1' 
			:subPic2='middleOneSubPic2'
			:subPic3='middleOneSubPic3'
			:subPic4='middleOneSubPic4'
			></Middle>
			<Middle
			:bigPic='middleTwoBigPic' 
			:subPic1='middleTwoSubPic1' 
			:subPic2='middleTwoSubPic2'
			:subPic3='middleTwoSubPic3'
			:subPic4='middleTwoSubPic4'
			></Middle>
			<Middle
			:bigPic='middleThreeBigPic' 
			:subPic1='middleThreeSubPic1' 
			:subPic2='middleThreeSubPic2'
			:subPic3='middleThreeSubPic3'
			:subPic4='middleThreeSubPic4'
			></Middle>
			<view class="main">
				<view class="mainTitle">
					<text class="mainTitleText" :style="{color: mainTitleInfo.titleColor}">{{mainTitleInfo.title}}</text>
				</view>
				<view class="mainContent">
					<view class="mainContentLeft">
						<view v-for="leftItem in leftSkuInfo" :key="leftItem.skuId" class="mainContentItem">
							<img mode="widthFix" class="itemImg" :src="leftItem.images" :alt="leftItem.skuName">
							<text class="itemText">{{leftItem.skuName}}</text>
							<text class="itemPrice">¥{{parseInt(leftItem.discountPrice)}}</text>
						</view>
					</view>
					<view class="mainContentRight">
						<view v-for="leftItem in rightSkuInfo" :key="leftItem.skuId" class="mainContentItem">
							<img mode="widthFix" class="itemImg" :src="leftItem.images" :alt="leftItem.skuName">
							<text class="itemText">{{leftItem.skuName}}</text>
							<text class="itemPrice">¥{{parseInt(leftItem.discountPrice)}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="toTop" @click="goToTop">
			^
		</view>
	</view>
</template>

<script>
	import Middle from '../../components/Middle.vue';
	import { mapGetters, mapState } from 'vuex';
	export default {
		data() {
			return {
				middleOneBigPic: '../../../static/images/middleOneBigPic.webp',
				middleOneSubPic1: '../../../static/images/middleOneSubPic1.webp',
				middleOneSubPic2: '../../../static/images/middleOneSubPic2.webp',
				middleOneSubPic3: '../../../static/images/middleOneSubPic3.webp',
				middleOneSubPic4: '../../../static/images/middleOneSubPic4.webp',
				
				middleTwoBigPic: '../../../static/images/middleTwoBigPic.webp',
				middleTwoSubPic1: '../../../static/images/middleTwoSubPic1.webp',
				middleTwoSubPic2: '../../../static/images/middleTwoSubPic2.webp',
				middleTwoSubPic3: '../../../static/images/middleTwoSubPic3.webp',
				middleTwoSubPic4: '../../../static/images/middleTwoSubPic4.webp',
				
				middleThreeBigPic: '../../../static/images/middleThreeBigPic.webp',
				middleThreeSubPic1: '../../../static/images/middleThreeSubPic1.webp',
				middleThreeSubPic2: '../../../static/images/middleThreeSubPic2.webp',
				middleThreeSubPic3: '../../../static/images/middleThreeSubPic3.webp',
				middleThreeSubPic4: '../../../static/images/middleThreeSubPic4.webp',
				
				arrow: false,
				scrollTop: 0, // 滚动条位置，距顶为0
				oldScrollTop: 0,
			}
		},
		onLoad() {

		},
		components:{
			Middle
		},
		methods: {
			getMainTitleInfo(){
				this.$store.dispatch('home/getMainInfo');
			},
			toSearch(){
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			appendSkuInfo(){
				if(this.skuInfo.length === 13){
				this.$store.dispatch('home/getAppendSkuInfo');
				}
			},
			scroll (e) {
				//记录scroll 位置
				this.oldScrollTop = e.detail.scrollTop;
			},
			goToTop(){
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop;
				//当视图渲染结束 重新设置为0
				this.$nextTick(() =>{
				this.scrollTop = 0;
				});
			},
		},
		computed:{
			...mapState('home', ['skuInfo']),
			...mapGetters('home', ['mainTitleInfo']),
			leftSkuInfo(){
				return this.skuInfo.filter((item, index) => index % 2 === 0)
				// return	this.skuInfo.map((item, index) => {
				// 	if(index % 2 === 0){
				// 		return item;
				// 	}
				// }).filter(item => item)
			},
			rightSkuInfo(){
				return this.skuInfo.filter((item, index) => index % 2 !== 0)
				// return	this.skuInfo.map((item, index) => {
				// 	if(index % 2 !== 0){
				// 		return item;
				// 	}
				// }).filter(item => item)
			}
		},
		mounted() {
			this.getMainTitleInfo();
		}
	}
</script>

<style lang="stylus">
	.container
		position: relative
		height: 100%
		scroll-view
			height: 100%
			.headerSwiper
				height: 480upx
				width: 100%
				& img
					height: 480upx
					width: 100%
			.header
				position: absolute
				top: 0
				left: 0
				display: flex
				flex-direction: column
				align-items: center
				height: 480upx
				.logo
					height: 50upx
					width: 50upx
					border-radius: 50%
					background-image: url('/static/images/logo.png')
					background-size: cover
					background-repeat: no-repeat
					margin-top: 40upx
				.search
					width: 700upx
					height: 62.5upx
					background: hsla(0,0%,100%,.98)
					border-radius: 10upx
					margin-top: 25upx
					margin-left: 20upx
					display: flex
					padding-left: 12.5upx
					.searchContainer
						width: 350upx
						height: 62.5upx
						display: flex
						align-items: center
						& img
							width: 46upx
							height: 46upx
						.searchText
							font-size: 29upx
							font-family: "Helvetica Neue,Helvetica,Arial,SCREEN GP Sans SC,PingFang SC,Hiragino Sans GB,Microsoft Yahei,微软雅黑,STHeiti,华文细黑,sans-serif"
							color: rgba(0,0,0,.15)
							font-weight: 700
							margin-left: 20upx
			.main
				padding: 0 50upx
				.mainTitle
					height: 75upx
					line-height: 75upx
					.mainTitleText
						font-weight: 700
						font-size: 33upx
				.mainContent
					display: flex
					flex-wrap: wrap
					.mainContentLeft
						position: relative
						width: 50%
						display: flex
						flex-direction: column
						.mainContentItem
							position: relative
							display: flex
							flex-direction: column
							margin: 12.5upx 6.25upx
							padding: 0 0 25upx
							border-radius: 16.6upx
							background: rgba(0,0,0,.02)
							&::after
								content: ""
								position: absolute
								left: 0
								top: 0
								width: 100%
								height: 100%
								background: rgba(0,0,0,.02)
							.itemImg
								width: 100%
								vertical-align: middle
							.itemText
								margin: 4upx 0
								padding: 0 25upx
								color: #666
								font-size: 28upx
								font-weight: 700
							.itemPrice
								padding: 0 25upx
								color: #cf4b43
								font-size: 28upx
								font-weight: 700
					.mainContentRight
						position: relative
						width: 50%
						display: flex
						flex-direction: column
						.mainContentItem
							position: relative
							display: flex
							flex-direction: column
							margin: 12.5upx 6.25upx
							padding: 0 0 25upx
							border-radius: 16.6upx
							background: rgba(0,0,0,.02)
							&::after
								content: ""
								position: absolute
								left: 0
								top: 0
								width: 100%
								height: 100%
								background: rgba(0,0,0,.02)
							.itemImg
								width: 100%
								vertical-align: middle
							.itemText
								margin: 4upx 0
								padding: 0 25upx
								color: #666
								font-size: 28upx
								font-weight: 700
							.itemPrice
								padding: 0 25upx
								color: #cf4b43
								font-size: 28upx
								font-weight: 700
		.toTop
			position: fixed
			right: 30upx
			bottom: 30upx
			width: 72.9upx
			height: 72.9upx
			line-height: 72.9upx
			text-align: center
			vertical-align: middle
			padding: 10upx 0 0
			color: rgba(0,0,0,.4)
			box-shadow: 0 0.1rem 0.5rem rgb(0 0 0 / 6%)
			background-color: #fff
			border-radius: 12.5upx
			font-size: 60upx
			box-sizing: border-box
			// opacity: 0
</style>
